<template>
	<view class="page">
		<!-- //自定义组件传值 -->
		<!-- <hellocomp myval="hello next"></hellocomp> -->
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="containers">
			<swiper-item v-for="(item,index) in bannerList" :key='index'>
				<image :src="item.image" class="container" :data-bannerId="item.id" @click="showbanner"></image>
			</swiper-item>
		</swiper>
		<!-- 热门演出 start-->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image class="interest" src="http://www.imovietrailer.com/static/icos/hot.png" mode=""></image>
				<view class="hot-title">热门演出</view>
				<uni-icon type="arrowright" size="20" color="#333" class="iconright2"></uni-icon>
			</view>
		</view>
		
		 <scroll-view scroll-x="true"  class="page-block hot">
		 	<view class="single-poster" v-for="(item,index) in hotlist" :key='index'>
				<view class="poster-wrapper">
					<image :src="item.cover" class="poster-pic"></image> 
					<view class="poster-name">{{item.name}}</view>
					<view class="star">
						<traclerstar :innerscore='item.score' showNum="1"></traclerstar>
						<view class="uni-view">{{item.score}}</view>
					</view>
				</view>
			</view>
		 </scroll-view>
		<!-- 热门演出结束 -->
		
		<!-- 热门预告start -->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image class="interest" src="http://www.imovietrailer.com/static/icos/interest.png" mode=""></image>
				<view class="hot-title">热门预告</view>
				<uni-icon type="arrowright" size="20" color="#333" class="iconright2"></uni-icon>
			</view>
		</view>
		
		<!-- //视频播放 -->
		<view class="hot-movies page-block">
			<video 
			:src="item.trailer" 
			:poster="item.poster"  
			v-for="(item,index) in trailer" 
			:key='index' 
			class="hot-movie-single"
			:id="item.id"
			:data-palyintIndex="item.id"
			@play="meIsplaying"
			>
			</video>
		</view>
		<!-- 热门预告end -->
		
		<!-- 猜你喜欢start -->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image class="interest" src="http://www.imovietrailer.com/static/icos/guess-u-like.png" mode=""></image>
				<view class="hot-title">猜你喜欢</view>
			</view>
		</view>
		
		<view class="page-block guess-u-like">
			<view class="single-like-movie" v-for="(item,index) in guessULike" :key='index'>
				<image :src="item.poster" mode="" class="like-img"></image>
				<view class="like-info">
					<view class="like-name">{{item.name}}</view>
					<traclerstar innerscore='9.1' showNum="0"></traclerstar>
					<view class="basicInfo">{{item.basicInfo}}</view>
					<view class="releaseDate">{{item.releaseDate}}</view>
				</view>
				<view class="movie-open" :data-index="index"  @click="praiseMe">
					<image class="zan" src="http://www.imovietrailer.com/static/icos/praise.png" mode=""></image>
					<view class="zantext">赞一下</view>
					<view :animation="animationData[index]"  class="zantext animation-opacity" >
						+1
					</view>
				</view>
			</view>
		</view>
		
		<!-- 猜你喜欢end -->
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	// import common from "../../common/common.js"
	// 引入自定义组件
	// import hellocomp from '../../components/hellocomp/hellocomp.vue'
	import traclerstar from "../../components/traclerstar.vue"
	export default {
		data() {
			return {
				title: 'Hello',
				bannerList: [],
				hotlist:[],
				trailer:[],
				guessULike:[],
				animationData:{},
				animationDataArr:[
					{},{},{},{},{}
				]
			}
		},
		onUnload(){
			this.animationData={}
			THIS.animationDataArr=[
				{},{},{},{},{}
			]
		},
		onPullDownRefresh(){
			this.referer();
		},
		// 隐藏暂停视频
		onHide(){
			if(this.videoContext){
				this.videoContext.pause()
			}
		},
		onLoad() {
			// uni.request({
			// 	url:'http://mockjs.com/api/posts',
			// 	method:"GET",
			// 	success:(res)=>{
			// 		if(res.statusCode==200){
			// 			this.bannerList=res.data.posts
			// 			console.log(this.bannerList)
			// 		}
			// 	}
			// })
			//请求轮播数据
			var me=this;
			//在页面创建的时候，创建一个临时动画对象
			 // #ifdef APP-PLUS || MP-WEIXIN 
			this.animation=uni.createAnimation();
			 // #endif
			 
			uni.request({
				url: 'https://www.imovietrailer.com/superhero/index/carousel/list?qq=lee57837906',
				// header: {
				// 	'custom-header': 'hello' //自定义请求头信息
				// },
				method: 'POST',
				success: (res) => {
					if(res.statusCode==200){
						me.bannerList=res.data.data
						// console.log(this.bannerList);
					}
					
				}
			});
			//热门演出数据
			uni.request({
				url: 'https://www.imovietrailer.com/superhero/index/movie/hot?type=superhero&qq=lee57837906',
				data: {
					type: "superhero",
					qq: "lee35647036"
				},
				method: 'POST',
				success: (res) => {
					if(res.statusCode==200){
						me.hotlist=res.data.data
					}
					// console.log(me.hotlist);
					
				}
			});
			//热门预告接口
			uni.request({
				url: 'https://www.imovietrailer.com/superhero/index/movie/hot?type=trailer&qq=lee57837906',
				data: {
					type: 'trailer',
                    qq: "lee35647036"
				},
				method: 'POST',
				success: (res) => {
					if(res.statusCode==200){
						me.trailer=res.data.data
					}
					// console.log(me.trailer);
					
				}
			});
			
			me.referer();
			

		},
		methods: {
			//跳转详情页面
			showbanner(e){
				// var bannerId=e.currentTarget.dataset.bannerid
				// console.log(bannerId);
				// uni.navigateTo({
				// 	url:'../movie/movie?bannerId='+bannerId
				// })
				
			},
			
			//播放一个视频的时候需要暂停其他正在播放的视频
			meIsplaying(e){
				var me=this;
				var trailerId="";
				// debugger
				if(e){
					trailerId=e.currentTarget.dataset.palyintindex;
					me.videoContext=uni.createVideoContext(trailerId);
				}
				//视频循环
				var trailer=me.trailer
				for(var i=0;i<trailer.length;i++){
					var tempId=trailer[i].id;
					if(tempId!=trailerId){
						uni.createVideoContext(tempId).pause();
					}
				}
			},
			
			referer(){
				var me=this;
				
				uni.showLoading({
					mask:true //防止客户在加载中的时候去点击页面
				});
				
				uni.showNavigationBarLoading(); //最上面的标题的loding  pages.json "titleNView": true //禁用原生导航栏
				//猜你喜欢接口
				uni.request({
					url: 'https://www.imovietrailer.com/superhero/index/guessULike?qq=lee35647036',
					data: {
				        qq: "lee35647036"
					},
					method: 'POST',
					success: (res) => {
						if(res.statusCode==200){
							me.guessULike=res.data.data
						}
						console.log(me.guessULike)	
					},
					
					//下拉样式消失
					complete:()=>{
						uni.stopPullDownRefresh(); //隐藏h5下拉样式
						uni.hideLoading() //隐藏loding
						uni.hideNavigationBarLoading()
					}
				});
			},
			
			//实现点赞效果
			
			praiseMe(e){
				// #ifdef APP-PLUS||MP-WEIXIN
				var index=e.currentTarget.dataset.index;   //后面index小写
				console.log(index)
				// return
				//构建动画数据，并且通过step来表示动画的完成
				this.animation.translateY(-60).opacity(1).step({
					duration:400
				});
				//导出动画数据到view组件，实现组建的动画效果
				// this.animationData=this.animation.export();
				this.animationData=this.animation;
				this.animationDataArr[index]=this.animationData.export();
				//还原动画
				setTimeout(function() {
					this.animation.translateY(0).opacity(0).step({
						duration:0
					});
					this.animationData=this.animation;
					this.animationDataArr[index]=this.animationData.export();
				}.bind(this) ,500);
				// #endif
			}
			

		},
		components: {
			uniIcon, //icon
			traclerstar
		}
	}
</script>

<style>
	@import url("./index.css");
</style>
